<template>
<div>
  <ul class="tablist">

    <li :class="active==index?`active`:``" @click="getActive(index)" v-for="(item,index) in tablist">{{ item.label }}</li>
  </ul>
  <div class="content-big">
    <div class="label-item" v-if="active==0 || active==1">
      <div class="label-tip">
        <div class="title">行为标签</div>
        <div class="tips">可根据客户有无入群、私聊活跃度自动打标签</div>
        <div class="viewTip" @click="getLabelTips">使用说明</div>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-button size="small" type="primary">新建标签组</el-button>
        <el-button size="small" type="primary" style="margin: 0px 10px" plain>规则设置</el-button>
        <el-form-item prop="userName1">
          <div class="search">
            <el-input v-model="queryParams.userName1" size="small" placeholder="标签组/标签名" clearable/>
            <el-button icon="el-icon-search" size="small"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table
        :data="activelabelTableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in activelabelTableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div v-if="item.key=='name'">
              下班时间更改
            </div>
            <div class="label-list" v-else-if="item.key=='label'">
              <div class="label-span">未入VIP群
                <div class="btn-big">
                  <el-button size="mini" type="text" plain @click.stop="getEdit" style="cursor: pointer">编辑</el-button>
                  <el-button size="mini" type="text" plain style="cursor: pointer">删除</el-button>
                </div>
                <div  class="editLabel" v-if="showEditLabel">
                  <el-input type="text" placeholder="请输入内容" v-model="msg" maxlength="10" show-word-limit></el-input>
                  <div class="edit-big">
                    <el-button size="mini" type="primary" plain>保存</el-button>
                    <el-button size="mini" plain>取消</el-button>
                  </div>

                </div>
              </div>
            </div>
            <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="420"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="group-btn">
              <el-button type="text">新增标签</el-button>
              <el-button type="text">删除该组</el-button>
              <el-button type="text">批量删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="label-item" v-if="active==0 || active==2">
      <div class="label-tip">
        <div class="title">生命周期标签</div>
        <div class="tips">可根据标签自动匹配生命周期阶段</div>
        <div class="viewTip" @click="getLifeCycleLabelTips">使用说明</div>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-button size="small" type="primary">新建标签组</el-button>
        <el-button size="small" type="primary" style="margin: 0px 10px" plain>规则设置</el-button>
        <el-form-item prop="userName1">
          <div class="search">
            <el-input v-model="queryParams.userName1" size="small" placeholder="标签组/标签名" clearable/>
            <el-button icon="el-icon-search" size="small"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table
        :data="activelabelTableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in activelabelTableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div v-if="item.key=='name'">
              下班时间更改
            </div>
            <div class="label-list" v-else-if="item.key=='label'">
              <div class="label-span">未入VIP群
                <div class="btn-big">
                  <el-button size="mini" type="text" plain @click.stop="getEdit" style="cursor: pointer">编辑</el-button>
                  <el-button size="mini" type="text" plain style="cursor: pointer">删除</el-button>
                </div>
                <div  class="editLabel" v-if="showEditLabel">
                  <el-input type="text" placeholder="请输入内容" v-model="msg" maxlength="10" show-word-limit></el-input>
                  <div class="edit-big">
                    <el-button size="mini" type="primary" plain>保存</el-button>
                    <el-button size="mini" plain>取消</el-button>
                  </div>

                </div>
              </div>
            </div>
            <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="420"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="group-btn">
              <el-button type="text">新增标签</el-button>
              <el-button type="text">删除该组</el-button>
              <el-button type="text">批量删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="label-item" v-if="active==0 || active==3">
      <div class="label-tip">
        <div class="title">客户价值标签</div>
        <div class="tips">可根据消费金额和频次进行客户分层运营</div>
        <div class="viewTip" @click="getCustomerValueTips">使用说明</div>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-button size="small" type="primary">新建标签组</el-button>
        <el-button size="small" type="primary" style="margin: 0px 10px" plain>规则设置</el-button>
        <el-form-item prop="userName1">
          <div class="search">
            <el-input v-model="queryParams.userName1" size="small" placeholder="标签组/标签名" clearable/>
            <el-button icon="el-icon-search" size="small"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table
        :data="activelabelTableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in activelabelTableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div v-if="item.key=='name'">
              下班时间更改
            </div>
            <div class="label-list" v-else-if="item.key=='label'">
              <div class="label-span">未入VIP群
                <div class="btn-big">
                  <el-button size="mini" type="text" plain @click.stop="getEdit" style="cursor: pointer">编辑</el-button>
                  <el-button size="mini" type="text" plain style="cursor: pointer">删除</el-button>
                </div>
                <div  class="editLabel" v-if="showEditLabel">
                  <el-input type="text" placeholder="请输入内容" v-model="msg" maxlength="10" show-word-limit></el-input>
                  <div class="edit-big">
                    <el-button size="mini" type="primary" plain>保存</el-button>
                    <el-button size="mini" plain>取消</el-button>
                  </div>

                </div>
              </div>
            </div>
            <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="420"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="group-btn">
              <el-button type="text">新增标签</el-button>
              <el-button type="text">删除该组</el-button>
              <el-button type="text">批量删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="label-item" v-if="active==0 || active==4">
      <div class="label-tip">
        <div class="title">时间进程标签</div>
        <div class="tips">可根据时间进程自动打标签</div>
        <div class="viewTip" @click="getTimeCourseTips">使用888说明</div>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-button size="small" type="primary">新建标签组</el-button>
        <el-button size="small" type="primary" style="margin: 0px 10px" plain>规则设置</el-button>
        <el-form-item prop="userName1">
          <div class="search">
            <el-input v-model="queryParams.userName1" size="small" placeholder="标签组/标签名" clearable/>
            <el-button icon="el-icon-search" size="small"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table
        :data="activelabelTableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in activelabelTableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div v-if="item.key=='name'">
              下班时间更改
            </div>
            <div class="label-list" v-else-if="item.key=='label'">
              <div class="label-span">未入VIP群
                <div class="btn-big">
                  <el-button size="mini" type="text" plain @click.stop="getEdit" style="cursor: pointer">编辑</el-button>
                  <el-button size="mini" type="text" plain style="cursor: pointer">删除</el-button>
                </div>
                <div  class="editLabel" v-if="showEditLabel">
                  <el-input type="text" placeholder="请输入内容" v-model="msg" maxlength="10" show-word-limit></el-input>
                  <div class="edit-big">
                    <el-button size="mini" type="primary" plain>保存</el-button>
                    <el-button size="mini" plain>取消</el-button>
                  </div>

                </div>
              </div>
            </div>
            <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="420"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="group-btn">
              <el-button type="text">新增标签</el-button>
              <el-button type="text">删除该组</el-button>
              <el-button type="text">批量删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="label-item" v-if="active==0 || active==5">
      <div class="label-tip">
        <div class="title">自定义标签</div>

      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-button size="small" type="primary">新建标签组</el-button>
        <el-form-item prop="userName1">
          <div class="search">
            <el-input v-model="queryParams.userName1" size="small" placeholder="标签组/标签名" clearable/>
            <el-button icon="el-icon-search" size="small"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table
        :data="activelabelTableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in activelabelTableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div v-if="item.key=='name'">
              下班时间更改
            </div>
            <div class="label-list" v-else-if="item.key=='label'">
              <div class="label-span">未入VIP群
                <div class="btn-big">
                  <el-button size="mini" type="text" plain @click.stop="getEdit" style="cursor: pointer">编辑</el-button>
                  <el-button size="mini" type="text" plain style="cursor: pointer">删除</el-button>
                </div>
                <div  class="editLabel" v-if="showEditLabel">
                  <el-input type="text" placeholder="请输入内容" v-model="msg" maxlength="10" show-word-limit></el-input>
                  <div class="edit-big">
                    <el-button size="mini" type="primary" plain>保存</el-button>
                    <el-button size="mini" plain>取消</el-button>
                  </div>

                </div>
              </div>
            </div>
            <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          width="420"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div class="group-btn">
              <el-button type="text">新增标签</el-button>
              <el-button type="text">删除该组</el-button>
              <el-button type="text">批量删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
   <!--  行为提示-->
  <labelTips v-if="showLabelTips" :visableIf.sync="showLabelTips"></labelTips>
<!--  生命周期提示-->
  <lifeCycleLabelTips v-if="showlifeCycleLabelTips" :visableIf.sync="showlifeCycleLabelTips"></lifeCycleLabelTips>
<!--  客户价值标签提示-->
  <customerValueTips v-if="showCustomerValueTips" :visableIf.sync="showCustomerValueTips"></customerValueTips>
  <!--  时间标签提示-->
  <timeCourseTips v-if="showTimeCourseTips" :visableIf.sync="showTimeCourseTips"></timeCourseTips>
</div>
</template>
<script>
export default {
  name: "smartTagsMgtList",
  components: {
    'labelTips': () => import('./components/labelTips.vue'),//行为标签
    'lifeCycleLabelTips': () => import('./components/lifeCycleLabelTips.vue'),//生命周期
    'customerValueTips': () => import('./components/customerValueTips.vue'),//客户价值
    'timeCourseTips': () => import('./components/timeCourseTips.vue'),//时间进程
  },
  data(){
    return{
      active:0,
      showLabel:true,
      showEditLabel:false,
      msg:'未入vip群',
      showLabelTips:false,
      showlifeCycleLabelTips:false,
      showCustomerValueTips:false,
      showTimeCourseTips:false,
      tablist: [
        {value: 0, label: '全部类型',},
        {value: 1, label: '行为标签',},
        {value: 2, label: '生命周期标签',},
        {value: 3, label: '客户价值标签',},
        {value: 4, label: '时间进程标签',},
        {value: 5, label: '自定义标签',},
      ],
      activelabelTableHeight: 600,
      activelabelTableColumns: [
        {key: 'name', label: `分组`, visible: true, minWidth: 150, fixed: true},
        {key: 'label', label: `标签`, visible: true, minWidth: 150, fixed: false},

      ],
      activelabelTableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    }
  },
  created() {
    // this.getList();
    this.activelabelTableDataList = [];
    for (let i = 0; i < 1; i++) {
      let obj = {
        name: '小红',
        label1: '18207418337',
        label2: '18207418337',
        label3: '18207418337',
        label4: '18207418337',
      }
      this.activelabelTableDataList.push(obj);
    }
  },
  methods:{
    getActive(index) {
      this.active = index;
    },
    getEdit(){
      this.showEditLabel=true;
      console.log(' this.showEditLabel', this.showEditLabel);
    },
    handleMouseOver(){
      this.showLabel=false;
    },
    getLabelTips(){
      this.showLabelTips=true;
    },
    getLifeCycleLabelTips(){
      this.showlifeCycleLabelTips=true;
    },
    getCustomerValueTips(){
      this.showCustomerValueTips=true;
    },
    getTimeCourseTips(){
      this.showTimeCourseTips=true;
    },
    handleMouseOut(){
      this.showLabel=true;
    },
  },
}
</script>



<style scoped lang="scss">
.tablist {
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  background: #fff;

  li {
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    margin: 0px 10px;
    position: relative;
    display: flex;
    height: 44px;
    align-items: center;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        background: #3070ff;
        width: 100%;
        bottom: 0px;
        left: 0px;
      }
    }
  }

  .example-modal {
    position: fixed;
    left: 0;
    margin-top: 10px;
    display: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    background: #FFFFFF;

    .example-cover {
      height: 600px;
    }
  }
}
.search {
  display: flex;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
.label-item {
  margin: 10px;
}
.el-form {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 10px 10px;
  .el-form-item {
    margin-bottom: 0px ;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.label-tip {
  height: 40px;
  align-items: center;
  display: flex;
  font-size: 14px;
  .title {
    font-weight: bold;
    margin-right: 10px;
  }
}
.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
    position: relative;
  }

  .label-span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-flex;

  }
}
.editLabel {
  width: 150px;
  background: #fff;
  position: absolute;
  left:50%;
  margin-left: -80px;
  top: 0px;
  height: 100px;
  border: 1px solid #eee;
  background: #fff;
  padding:10px;

  ::v-deep .el-input {
    margin-bottom: 10px;
  }
}
.btn-big {
  display: flex;
  align-items: center;
  margin-left: 10px;

}
::v-deep .el-table {
  overflow: visible;
  .el-table__body-wrapper {
    overflow: visible;
  }
}
.content-big {
  height:calc(100vh - 100px);
  overflow-y: auto;
}
.viewTip {
  color: #2d8cf0;
  margin-left: 10px;
  cursor: pointer;
}
</style>
